<html> 
    <head> 
        <link rel="Stylesheet" media="screen" href="styles.css" /> 
        <link rel="Stylesheet" media="screen" href="ui.dropslide.css" /> 
        <script type="text/javascript" src="jquery.min.js"></script> 
        <script type="text/javascript" src="ui.js"></script> 
        <script type="text/javascript" src="jquery.utils.js"></script> 
        <script type="text/javascript" src="jquery.strings.js"></script> 
        <script type="text/javascript" src="ui.dropslide.js"></script> 
        <script type="text/javascript" src="ui.timepickr.js"></script> 
 
        <script type="text/javascript"> 
            $(function(){
                //$('#test-1').timepickr({trigger: '#trigger-test'});
              $('#test-1').timepickr({handle: '#trigger-test'});
            });
        </script> 
    </head> 
    <body id="body"> 
	<label>Start time:</label> 
            <input id="test-1" type="text" value="12:00" style="width:80px"> 
            <img src="clock.png" alt="Time" border="0" style="position:absolute;margin:4px 0 0 6px;" id="trigger-test" /> 
    </body>
</html>
